<template>
	<div class="diy_form">
			<b-form-group v-if="$check_register_field('add','user_name','/regular_users/view')" id="input-group-${idx}" label="用户姓名" label-for="input-${idx}">
			<b-form-input id="input-${idx}" v-model="form['user_name']" type="text" placeholder="用户姓名" trim></b-form-input>
		</b-form-group>
				<b-form-group v-if="$check_register_field('add','mobile_phone_number','/regular_users/view')" id="input-group-${idx}" label="手机号码" label-for="input-${idx}">
			<b-form-input id="input-${idx}" v-model="form['mobile_phone_number']" type="tel" placeholder="手机号码" trim></b-form-input>
		</b-form-group>
				<b-form-group v-if="$check_register_field('add','recommended_specifications','/regular_users/view')" id="input-group-${idx}" label="规格推荐" label-for="input-${idx}">
			<el-select id="input-${idx}" v-model="recommended_specifications_multiple_value" multiple
					   @change="select_recommended_specifications_multiple">
				<el-option v-for="o in list_recommended_specifications" :key="o['clothing_specifications']" :label="o['clothing_specifications']"
						   :value="o['clothing_specifications']">
				</el-option>
			</el-select>
		</b-form-group>
		</div>
</template>

<script>
	import mixin from "@/mixins/component.js";

	export default {
		mixins: [mixin],
		model: {
			prop: "form",
			event: "change"
		},
		props: {
			form: {
				type: Object,
				default: () => {
					return {

					}
				}
			}
		},
		data(){
			return {
				url_upload: "~/api/regular_users/upload?",
														recommended_specifications_multiple_value:[],
		        // 规格推荐选项列表
        list_recommended_specifications: [],
					}
		},
		methods: {
			// 下拉数据列表转换
			getDropList(e){
				let resultArr = [];
				if(e){
					let arr = e.split(",");
					arr.forEach(item => {
						resultArr.push({
							value: item,
							text: item
						})
					});
				}
				return resultArr;
			},
						      /**
       * 获取规格推荐列表
       */
      async get_list_recommended_specifications() {
        let json = await this.$get("~/api/clothing_specifications/get_list?");
        if(json.result && json.result.list){
					this.list_recommended_specifications = json.result.list
		        }
        else if(json.error){
          console.error(json.error);
        }
      },
            		select_recommended_specifications_multiple(v){
			this.form.recommended_specifications = "";
			if (v && v.length>0){
				this.form.recommended_specifications = v.toString();
			}
		},
      				/**
			 * 上传图片
			 * @param {Object} file 文件对象
			 * @param {key} 保存键名
			 */
			uploadFile(file, key = "img") {
				var _this = this;
				var form = new FormData() // FormData 对象
				form.append('file', file[0]) // 文件对象
				this.$upload(this.url_upload, form, function(json) {
					if (json.result) {
						// _this.form[key] = json.result.url;
						_this.$delete(_this.form,key);
						_this.$set(_this.form,key,json.result.url);
						console.log(_this.form[key])
					} else {
						_this.$toast('上传失败！');
					}
				});
			},
		},
    created() {
			      this.get_list_recommended_specifications();
	    },
	mounted(){
				}
	}
</script>

<style>

.diy_fg.form-group {
    display: flex;
    justify-content: space-between;
}

.diy_in {
    width: 85%;
}
</style>
